<template>
  <div class="basic-modify-setting-container">
    <!-- <Promised :promise="userInfoAsync">
      <template v-slot:pending>
        <Skeleton
          :rows="15"
        />
      </template>
      <template v-slot> -->
    <section>
      <!-- {{ currentUser }} -->
      <Account />

      <a-divider />

      <Personal ref="personalRef" />

      <a-divider />

      <Bank />

      <!-- <div class="button-container">
            <a-button
              class="submit-button"
              type="primary"
              size="large"
              shape="round"
              :loading="formLoading"
              @click="submitForm"
            >
              Submit
            </a-button>
          </div> -->
    </section>
    <!-- </template>
    </Promised> -->
  </div>
</template>

<script>
import Account from './information/modify/Account.vue';
import Personal from './information/modify/Personal';
import Bank from './information/modify/Bank.vue';
import user from './user';

export default {
  components: {
    Account,
    Personal,
    Bank
  },

  mixins: [user],

  data() {
    return {
      formLoading: false
    };
  },

  computed: {
    personalRef() {
      return this.$refs.personalRef;
    }
  },

  methods: {

  }
};
</script>

<style lang="scss">
.basic-modify-setting-container {
  background-color: $white;
  padding-bottom: 135px;
  .bank-information,
  .account-information {
    padding: 32px 70px 20px 90px;
    .infos-container {
      padding-left: 164px!important;
    }
  }

  .information-container {
    // margin-top: $margin-md;
    & > .title {
      font-weight: bold;
      font-size: $font-size-lg;
    }

    .infos-container {
      padding-left: 126px;
    }
    .info-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: $margin-sm;
      color: $gray-12;
      .label {
        display: flex;
        align-items: center;
        span {
          margin-left: $margin-base;
          color: $black-1;
        }
        .password {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: $black;
        }
      }
    }
  }
}

@media (max-width: $screen-lg) {
  .basic-modify-setting-container {
    .bank-information,
    .account-information {
      padding: $padding-xs;

      .infos-container {
        padding-left: 6px!important;
        padding-right: 0px!important;
      }
    }
  }
}
</style>
